Estoy tratando de aprender y usar los métodos getAuth(), onAuthStateChanged() de "firebase/auth" pero en la carpeta de node_modules/firebase/auth no incluye esos métodos. Parece que los directorios cambian según las versiones de firebase. Mis dependencias:
"dependencies": { "antd": "^4.16.13", "firebase": "^9.0.2", "next": "11.1.2", "react": "17.0.2", "react-dom": "17.0.2" }, Según el documento de firebase, dice que debo usar import { getAuth, onAuthStateChanged } from "firebase/auth"; Busqué y encontré que "firebase/firebase-auth"; la carpeta ha incluido el método getAuth , pero cuando trato de usar import {getAuth} from "firebase/firebase-auth"; me da un error que indica firebase/firebase-auth no se exporta.
¿Qué me perdí?
¿Cómo puedo usar los métodos getAuth y onAuthStateChanged con estas dependencias?
gracias por los consejos
base de fuego.js:
// import "firebase/auth" import "firebase/compat/auth" //import {getAuth} from "firebase/firebase-auth"; import firebase from 'firebase/compat/app'; import 'firebase/compat/firestore'; import { getAuth, onAuthStateChanged } from "firebase/auth"; // onAuthStateChanged(auth, user => { // // Check for user status // }); const app = firebase.initializeApp({ apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGIN_SENDER_ID, appId: process.env.REACT_APP_FIREBASE_APP_ID }) export const auth = getAuth(app); export default appimport React, { useState } from 'react' import { initializeApp } from "firebase/app"; import { getAuth, onAuthStateChanged, GoogleAuthProvider, signInWithPopup, signOut } from "firebase/auth"; import './App.css'; // import { getAnalytics } from "firebase/analytics"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries const firebaseConfig = { apiKey: authDomain: databaseURL: projectId: storageBucket: messagingSenderId: appId: }; initializeApp(firebaseConfig); // const analytics = getAnalytics(app); const firebaseApp = initializeApp(firebaseConfig); const provider = new GoogleAuthProvider(); const auth = getAuth(firebaseApp); export default function App() { const [user, setUser] = useState(null) onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/firebase.User setUser(user); // ... } else { // User is signed out // ... setUser(null) } } ); return <>{user ? <><p>Welcome</p><button onClick={() => signOut(auth)}>Google Logout</button></> : <><p>Enjoy</p> <button onClick={() => signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. // eslint-disable-next-line const user = result.user; // ... }).catch((error) => { // Handle Errors here. // eslint-disable-next-line const errorCode = error.code; // eslint-disable-next-line const errorMessage = error.message; // The email of the user's account used. // eslint-disable-next-line const email = error.email; // The AuthCredential type that was used. // eslint-disable-next-line const credential = GoogleAuthProvider.credentialFromError(error); // ... })}> Sign in with Google </button> </>}</> }